<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天气案例</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            button{
                width: 60px;
                height: 40px;
                background-color: aquamarine;
                margin-left: 70px;
            }
        </style>
    </head>

    <body>
        <!-- vue容器 -->
        <div id="root">
            <h1>今天的天气很{{info}}</h1>
            <button v-on:click="isHot = !isHot;x++">切换</button>
        </div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true,
                    x:1
                },
                computed: {
                    info:function(){
                        return this.isHot?'炎热':'凉爽'
                    }
                },
                watch: {
                    isHot:{
                        immediate:true,//属性初始化时调用一下handler
                        //handler什么时候调用？监视属性发生变化时
                        handler:function(newValue,oldValue) {
                            console.log('新值:',newValue,"旧值：",oldValue);
                        }
                    },
                    info:{
                        immediate:true,
                        handler:function(var1,var2){
                            console.log('新值:',var1,'旧值',var2);
                        }
                    }
                },
            })
            
            vm.$watch('info',{
                immediate:true,
                handler:function(var1,var2){
                    console.log('新值:',var1,'旧值',var2);
                }
            })
        </script>
    </body>
</html>